<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/home' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/note/list' }">我的笔记</el-breadcrumb-item>
      <el-breadcrumb-item>查看笔记</el-breadcrumb-item>
    </el-breadcrumb>
    <link rel="stylesheet" href="/static/editormd/css/editormd.preview.css"/>
    <link rel="stylesheet" href="/static/editormd/css/editormd.css"/>
    <!--文章头部信息：标题，作者，最后更新日期，导航-->
    <h2>{{ note.noteTitle }}</h2>
    <h3>作者:{{ note.username }}</h3>
    <hr>
    <!--文章主体内容-->
    <div id="doc-content">
      <textarea style="display:none;"placeholder="markdown">{{ note.noteContent }}</textarea>
    </div>
  </div>
</template>

<script>
import scriptjs from 'scriptjs'
export default {
  data() {
    return {
      note: {
        noteTitle:'',
        username:'',
        noteContent:''
      },
    };
  },
  mounted() {
      var _this = this;
    (async () => {
      await _this.loadJs("/static/editormd/js/jquery.min.js");
      await _this.loadJs("/static/editormd/js/editormd.js");
      await _this.loadJs("/static/editormd/lib/marked.min.js");
      await _this.loadJs("/static/editormd/lib/prettify.min.js");
      await _this.loadJs("/static/editormd/lib/raphael.min.js");
      await _this.loadJs("/static/editormd/lib/underscore.min.js");
      await _this.loadJs("/static/editormd/lib/sequence-diagram.min.js");
      await _this.loadJs("/static/editormd/lib/flowchart.min.js");
      await _this.loadJs("/static/editormd/lib/jquery.flowchart.min.js");
      _this.jsLoadOver = true;
      var testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
        htmlDecode: "style,script,iframe",
        emoji: true,
        taskList: true,
        tocm: true,
        tex: true, // 默认不解析
        flowChart: true, // 默认不解析
        sequenceDiagram: true, // 默认不解析
        codeFold: true
      });
    })()
    // 在目标组件中访问传递的参数
    const noteId = this.$route.query.noteId;
    let url = '/api/note/showNote/' + noteId;
      // 在这里进行更新操作
      _this.axios.get(url).then(response => {
        this.note = response.data.data;
      }).catch(error => {
    });
  },
  methods: {
    loadJs: function (url) {
      return new Promise((resolve) => {
        scriptjs(url, () => {
          resolve();
        })
      })
    }
  },
  created() {
    if (location.href.indexOf("#reloaded")<=0) {
      location.href = location.href + "#reloaded";
      location.reload();
    }
  }
};
</script>

<style>
h2 {
  margin-top: 20px;
}
</style>